import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  tree: {
    width: "100%",
    fontSize: "12px",
    overflow: "auto",
    color: "#666",
  },
  fullHeight: {
    minHeight: "100%",
  },
  treeTitle: {
    color: "#333",
  },
  node: {
    display: "flex",
    lineHeight: "35px",
    whiteSpace: "nowrap",
    alignItems: "center",
    borderRadius: "4px",
    position: "relative",
    minWidth: "100%",
    "&:hover": {
      backgroundImage:
        "linear-gradient(transparent 14%, #f5f5f5 14%, #f5f5f5 84%, transparent 84%)",
      color: "#037aff",
    },
    "&:hover > .edit-btn": {
      display: "block",
    },
    "&:hover > .remove-btn": {
      display: "block",
      color: "red",
    },
    "&:hover > .add-btn": {
      display: "block",
    },
    "& .ct0-checkbox-single .ct0-checkbox": {
      borderRadius: "2px",
    },
  },
  nodeActive: {
    color: "#037aff",
  },
  title: {
    marginLeft: "5px",
    cursor: "pointer",
    display: "inline-block",
    flex: 1,
  },
  dashedLine: {
    width: "22px",
    height: "32px",
    display: "inline-block",
    position: "relative",
    flexShrink: 0,
  },
  dashedHor: {
    borderBottom: "1.5px dashed #d9d9d9",
    height: "50%",
    width: "50%",
    float: "right",
  },
  dashedVer: {
    borderRight: "1.5px dashed #d9d9d9",
    width: "50%",
    height: "100%",
    top: 0,
    position: "absolute",
  },
  treeNodeArrow: {
    cursor: "pointer",
    width: "22px",
    display: "flex",
    flexShrink: 0,
    justifyContent: "center",
    position: "relative",
  },
  treeNodeArrowIcon: {
    fontSize: "8px",
    transition: "transform 300ms",
    zIndex: 2,
    color: "#999999",
  },
  treeNodeArrowLine: {
    borderRight: "1.5px dashed #d9d9d9",
    width: "50%",
    height: "30%",
    bottom: 0,
    left: 0,
    position: "absolute",
  },
  hoverButton: {
    display: "none",
    cursor: "pointer",
    paddingRight: "10px",
    "&:first-child": {
      paddingLeft: "10px",
    },
  },
  removeButton: {
    alignSelf: "flex-end",
  },
  cancelButton: {
    alignSelf: "flex-end",
    cursor: "pointer",
    color: "#999999",
    paddingRight: "10px",
  },
  saveButton: {
    alignSelf: "flex-end",
    cursor: "pointer",
    paddingRight: "10px",
  },
  growSpace: {
    flex: 1,
  },
  input: {
    color: "#333",
    width: "232px",
    border: "1px solid #D9D9D9",
    height: "24px",
    fontSize: "12px",
    paddingLeft: "5px",
    borderRadius: "4px",
    marginLeft: "8px",
    "&:focus-visible": {
      outline: 0,
    },
  },
  add: {
    display: "flex",
  },
  addButton: {
    cursor: "pointer",
    color: "rgb(11, 113, 187)",
    display: "flex",
    alignItems: "center",
    marginLeft: "5px",
    "& > span": {
      margin: "0 5px",
    },
  },
  addNodeButton: {},
  addBranchButton: {},
  addChild: {
    display: "block",
    color: "#037aff",
  },
});

export { useStyles };
